import React from 'react';

export default class Degree extends React.Component {

    constructor() {
        super();
        this.state = {
            cslsiusTemp: 0,
            fah: 32
        };
        this.handlerCelsiusChange = this.handlerCelsiusChange.bind(this);
        this.handlerFahChang = this.handlerFahChang.bind(this);
    }

    handlerCelsiusChange(value) {
        this.setState({
            cslsiusTemp: value,
            fah: 32 + value * 1.8
        });
    }
    handlerFahChang(value) {
        this.setState({
            cslsiusTemp: (value - 32) / 1.8,
            fah: value
        });
    }

    render() {
        return (
            <div>
                <InputCelsius onChange={this.handlerCelsiusChange} value={this.state.cslsiusTemp}/>
                <InputFah onChange={this.handlerFahChang} value={this.state.fah}/>
            </div>
        );
    }
}

/**
 * 摄氏温度组件
 *
 * @class InputCelsius
 * @extends {React.Component}
 */
class InputCelsius extends React.Component {

    constructor(props) {
        super(props);
        this.handlerChange = this.handlerChange.bind(this);
    }

    handlerChange(event) {
        if (this.props.onChange) {
            this.props.onChange(event && event.target.value);
        }
    }
    render() {
        const { value } = this.props;
        return (
            <div style={{margin: '10px 0'}}>
                <span>摄氏温度为: </span>
                <input value={value} onChange={this.handlerChange}/>
            </div>
        );
    }
}

class InputFah extends React.Component {

    constructor(props) {
        super(props);
        this.handlerChange = this.handlerChange.bind(this);
    }

    handlerChange(event) {
        if (this.props.onChange) {
            this.props.onChange(event && event.target.value);
        }
    }
    render() {
        const { value } = this.props;
        return (
            <div style={{margin: '10px 0'}}>
                <span>华氏温度为: </span>
                <input value={value} onChange={this.handlerChange}/>
            </div>
        );
    }
}